<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="./js/common.js"></script>
		<style>
			.index .mui-table-view-cell:after {
            height: 0;
        }
    </style>
	</head>
	<body>
		<div class="index">
			<div class="bg-dark flex flex-jc-around pd-10 pos-relative logo-content">
				<img src="./img/arbicap_logo.png" style="height: 80px" alt="">
				<h1 style="height: 80px;line-height: 80px;" class="cl-white">阿尔卑斯</h1>
			</div>
			<div class="flex flex-jc-start pd-5 bg-white">
				<a class="bdr flex flex-jc-around flex-ai-center flex-wrap" href="./recharge.html" style="width: 50%;height: 80px;">
					<span class="iconfont iconchongzhi cl-dark" style="font-size: 35px;"></span>
					<p class="w100 mgt-4 percent" style="font-size: 16px;text-align: center;margin: 0">报单</p>
					<p class="principal" style="margin-bottom: 0;">报单总额：111</p>
				</a>
				<a href="./cashout.html" style="width: 50%;height: 80px;" class=" flex flex-jc-around flex-ai-center flex-wrap">
					<span class="iconfont icontixian cl-dark" style="font-size: 35px;"></span>
					<p class="w100 mgt-4" style="font-size: 16px;text-align: center;margin: 0">提现</p>
					<p class="balance" style="margin-bottom: 0;">余额：</p>
				</a>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell flex notice" style="box-sizing: border-box">
					<!-- 公告 -->
				</li>
			</ul>
			<ul class="mui-table-view pdl-5 pdr-5 pdt-10 pdb-20">
				<li class="mui-table-view-cell pd-5 bd bd-radius-10 mgb-5">
					<a class="mui-navigate-right" href="./property.html"><span class="mui-icon mui-icon-contact mgr-4"></span>资产明细</a>
				</li>
				<!-- <li class="mui-table-view-cell pd-5 bd bd-radius-10 mgb-5">
					<a class="mui-navigate-right"><span class="mui-icon mui-icon-gear mgr-4"></span>账户设置</a>
				</li> -->
				<li class="mui-table-view-cell pd-5 bd bd-radius-10 mgb-5">
					<a class="mui-navigate-right" href="./team.html"><span class="mui-icon mui-icon-personadd mgr-4"></span>我的团队</a>
				</li>
				<li class="mui-table-view-cell pd-5 bd bd-radius-10 mgb-5">
					<a class="mui-navigate-right" href="./friend.html"><span class="mui-icon mui-icon-starhalf mgr-4"></span>邀请好友</a>
				</li>
				<li class="mui-table-view-cell pd-5 bd bd-radius-10 mgb-5">
					<a href="./bonus.html" class="mui-navigate-right"><span class="mui-icon mui-icon-home mgr-4"></span>提现明细</a>
				</li>
			</ul>
			<br>
			<div class="logout">
				<button style="position: fixed;bottom: 0" type="button" class="mui-btn mui-btn-outlined w100 pdt-5 pdb-5 bg-white">
					退出登录
				</button>
			</div>

		</div>
		<script>
			const members_id = localStorage.getItem('MEMBERS')
			mui.ajax(HOST + 'v1/members-detail', {
				data: {
					members_id: members_id
				},
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(res) {
					if (res.result === 0) {
						if (res.data.percent.length > 0) {
							mui('.percent')[0].innerHTML = `报单(${res.data.percent*100}%)`
						}
						mui('.principal')[0].innerHTML = `报单总额(${res.data.principal})`
						mui('.balance')[0].innerHTML = `余额(${res.data.balance})`
					}

				},
				error: function(xhr, type, errorThrown) {
					mui.toast(errorThrown, {
						duration: 'long',
						type: 'div'
					})
				}
			});

			mui('.logout').on('tap','button',function(){
				localStorage.setItem('MEMBERS','')
				localStorage.setItem('CODE','')
				location.href = './login.html'
			})

			mui.ajax(HOST + 'v1/notice-list', {
				data: {
					page: 1
				},
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(res) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if (res.result === 0) {
						const notice = res.data.list[0]
						let html = ''
						if (notice) {
							html =
								`
								<p><b>公告：</b></p>
								<a href="./notice-detail.html?id=${notice.notice_id}" class="text-ellipsis flex-1" style="width: 85%;font-size: 13px">${notice.title}</a>`
						}
						mui('.notice')[0].innerHTML = html
					} else {
						mui.toast(res.message, {
							duration: 'long',
							type: 'div'
						})
					}
				},
				error: function(xhr, type, errorThrown) {
					mui.toast(errorThrown, {
						duration: 'long',
						type: 'div'
					})
				}
			});
		</script>
	</body>
</html>
